<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id="app">
        <p>
            Ask a yes/no question:
            <input v-model="question" />
        </p>
        <hr>
        <p>{{ question }}:{{questionLength}}</p>
        <p>{{ answer }}</p>
        <button @click="getAnswer">getAnswer</button>
    </div>
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <!-- <script src="https:
    <!-- <script src="./axios.min.js"></script> -->

    <script>
        Vue.createApp({
            data() {
                return {
                    question: "开梓是南通吗",
                    answer: "正确的,客观的,中肯的,有道理的,形而上学的,牛魔酬宾的"
                }
            },
            methods: {
                getAnswer() {
                    console.log("getAnswer...");
                    this.answer = "我再can can need..."
                    setTimeout(() => {
                        this.answer = (Math.random()>.5?"YES":"NO")
                    }, 3000);
                }
            },
            computed: {
                questionLength() {
                    return this.question.length
                }
            },
            watch: {
                question(newValue, oldValue) {
                    console.log("question发生了变化:newValue,oldValue", newValue, oldValue);    
                    if (this.question.endsWith("?")) {
                        this.getAnswer()
                    }
                }
            }
        }).mount("#app")
    </script>
</body>

</html>